.<template>
  <div class="classMain">
      <div class="add_class_background" id="add_class_background" @click="class_add_close">
        <div class="add_class" @click.stop="class_stopEvent">
          <el-form :inline="true">
        <el-form-item label="Class Name:">
          <el-input v-model="class_add_className" placeholder="Class Name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="class_post_add">
            Add
          </el-button>
        </el-form-item>
      </el-form>
        </div>
      </div>

      <div class="del_class_background" id="del_class_background" @click="class_del_close">
        <div class="del_class" id="del_class" @click.stop="class_stopEvent">
          Are you sure want to delete this class?<br> it will gone for a very long time(realy long)
          <br>
          <br>
            <el-form :inline="true">
              <el-form-item>
                <el-button type="primary" @click="class_del">Yes,DELETE</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="class_del_close">No</el-button>
              </el-form-item>
            </el-form>
            click outside to cancel
        </div>
      </div>

      <div class="modify_class_course_background" id="modify_class_course_background" @click="class_modifyCourse_close">
        <div class="modify_class_course" @click.stop="class_stopEvent">
          <add-course-panel :class_modify_id="class_modify_id" ref="course" ></add-course-panel>
        </div>
      </div>

      <div class="modify_class_student_background" id="modify_class_student_background" @click="class_modifyStudent_close">
        <div class="modify_class_student" @click.stop="class_stopEvent">
          <student-panel :class_modify_id="class_modify_id" ref="student"></student-panel>
        </div>
      </div>

      <div class="modify_class_background" id="modify_class_background"  @click="class_modify_close">
       <div class="modify_class" @click.stop="class_stopEvent">
          <el-form :inline="true">
        <el-form-item label="Class Name:">
          <el-input v-model="class_modify_className" placeholder="Class Name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="class_post_modify">
            modify
          </el-button>
        </el-form-item>
      </el-form>
        </div>
      </div>

      <div class="class_search">
        <el-form :inline="true">
        <el-form-item label="Class Name:">
          <el-input v-model="class_search_className" placeholder="Class Name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="btn_class_search">
            Search
          </el-button>
        </el-form-item>
      </el-form>
      </div>
      <div class="class_add_btn">
      <el-button type="primary" v-on:click="btn_class_add">
            Add
          </el-button>
      </div>
      <div class="class_table">
        <el-table :data="class_table_data" @row-click="class_details">
        <el-table-column width="150" prop="no" label="ID"></el-table-column>
        <el-table-column  prop="className" label="Class name"></el-table-column>
        <el-table-column label="Action">
          <template slot-scope="scope">
          <el-button @click="btn_class_modify">Modify</el-button>
          <el-button @click="btn_class_course(scope.row)" >Add Course</el-button>
          <el-button @click="btn_class_student(scope.row)" >Modify Student</el-button>
          <el-button @click="btn_class_del(scope.row)" >Delete</el-button>
          </template>
        </el-table-column>
      </el-table>
      </div>
      <div class="page_nav_class">
        <el-pagination
        @current-change="class_page_handelchange"
        :current-page.sync="class_currentPage"
        :page-size="5"
        layout="total, prev, pager, next"
        :total="class_totalCount"
      >
      </el-pagination>
      </div>
  </div>
</template>

<script>
import axios from "axios";
import studentPanel from './studentPanel.vue';
import AddCoursePanel from './addCoursePanel.vue';
export default {
  components: { studentPanel, AddCoursePanel },
  comments:{
    studentPanel
  },
  data() {
    return {
      class_add_className:"",
      class_modify_className:"",
      class_search_className:"",
      class_table_data:[],
      class_totalCount:0,
      class_modify_id:null,
      class_currentPage:0
    }
  },
  methods: {
    class_details(row){
      this.class_modify_className = row.className;
      this.class_modify_id = row.id;
    },
    class_del(){
      let user = JSON.parse(sessionStorage.getItem("user"));
      let token = sessionStorage.getItem("token");
      let that = this;
      axios({
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
          token: token,
        },
        method: "Post",
        url: "http://localhost:8081/user-admin/delClass",
        data: JSON.stringify({
         operator:user.uid,
         id:that.class_modify_id
        }),
      }).then(function (r) {
        let result = JSON.parse(JSON.stringify(r));
        if (result.data.code === "0") {
          alert("delete succeed");
          that.class_del_close();
          that.class_get_classData(1);
        } else {
          alert(result.data.msg);
        }
      });
    },
    btn_class_del(row){
      this.class_modify_id = row.id;
      document.getElementById("del_class_background").style.display="block";
    },
    class_del_close(){
      document.getElementById("del_class_background").style.display="none";
    },
    btn_class_search(){
      this.class_get_classData(1,this.class_search_className);
    },
    btn_class_modify(){
      document.getElementById("modify_class_background").style.display="block";
    },
    class_modify_close(){
      document.getElementById("modify_class_background").style.display="none";
      this.class_modify_className = "";
    },
    btn_class_add(){
      document.getElementById("add_class_background").style.display="block";
    },
    class_add_close(){
      document.getElementById("add_class_background").style.display="none";
      this.class_add_className = "";
    },
    btn_class_student(row){
      this.$refs.student.student_get_studentData(row.id);
      document.getElementById("modify_class_student_background").style.display="block";
    },
    btn_class_course(row){
      this.$refs.course.get_course_table_data(row.id);
      document.getElementById("modify_class_course_background").style.display="block";
    },
    class_modifyCourse_close(){
      document.getElementById("modify_class_course_background").style.display="none";
    },
    class_modifyStudent_close(){
      document.getElementById("modify_class_student_background").style.display="none";
    },
    class_stopEvent(){
    },
    class_post_add(){

      let user = JSON.parse(sessionStorage.getItem("user"));
      let token = sessionStorage.getItem("token");

      let className = this.class_add_className;
      let that = this;
      axios({
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
          token: token,
        },
        method: "Post",
        url: "http://localhost:8081/user-admin/addClass",
        data: JSON.stringify({
         operator:user.uid,
         name:className
        }),
      }).then(function (r) {
        let result = JSON.parse(JSON.stringify(r));
        if (result.data.code === "0") {
          alert("Add succeed");
          that.class_add_className = "";
          class_get_classData(1,"");
          that.class_add_close();
        } else {
          alert(result.data.msg);
        }
      });
    },
    class_post_modify(){
      let user = JSON.parse(sessionStorage.getItem("user"));
      let token = sessionStorage.getItem("token");

      let className = this.class_modify_className;
      let that = this;
      axios({
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
          token: token,
        },
        method: "Post",
        url: "http://localhost:8081/user-admin/modifyClass",
        data: JSON.stringify({
         operator:user.uid,
         id:that.class_modify_id,
         name:className
        }),
      }).then(function (r) {
        let result = JSON.parse(JSON.stringify(r));
        if (result.data.code === "0") {
          alert("Modify succeed");
          that.class_modify_className = "";
          that.class_modify_close();
        } else {
          alert(result.data.msg);
        }
      });
    },
    class_get_classData(pageNo,className){
      if(pageNo==null){
        pageNo = 1;
      }
      let token = sessionStorage.getItem("token");
      let that = this;

      axios({
        headers: {
          token: token,
        },
        method: "Get",
        url: "http://localhost:8081/class-info/getClassInfo",
        params:{
          pageNo:pageNo,
          name:className
        }
        
      }).then(function (r) {
        let result = JSON.parse(JSON.stringify(r));
        if (result.data.code === "0") {
          let x=1
          for(let i of result.data.data.data){
            i.no = x++;
          }
          that.class_table_data = result.data.data.data;
          that.class_totalCount = result.data.data.totalCount;
          that.class_currentPage = result.data.data.pageNo;
        } else {
          alert(result.data.msg);
        }
      });
    },
    class_page_handelchange(val){
      this.class_get_classData(val)
    }
  },
  mounted() {
    this.class_get_classData(1)
  },
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
html,
body{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.class_add_btn{
  width: 100%;
  height: 8%;
  text-align: left;
  padding-left: 50px;
}
.classMain{
    width:100%;
    height: 100%;
    background-color: rgb(255, 255, 255);
    border-radius: 15px;
    box-shadow: gray 5px 5px 10px;
}
.class_search{
  padding-top: 20px;
  width: 100%;
  height: 10%;
  background-color: rgb(255, 255, 255);
  border-radius: 15px 15px 0px 0px;
}
.add_class{
  padding: 5%;
  z-index: 10;
  position: absolute;
  width: 400px;
  height: 200px;
  background-color: white;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 15px 15px 15px 15px;
}
.add_class_background{
  z-index: 9;
  position: absolute;
  width: 3000px;
  height: 3000px;
  background-color: rgba(0, 0, 0, 0.5);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

.del_class{
  padding: 5%;
  z-index: 10;
  position: absolute;
  width: 300px;
  height: 100px;
  background-color: white;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 15px 15px 15px 15px;
}
.del_class_background{
  z-index: 9;
  position: absolute;
  width: 3000px;
  height: 3000px;
  background-color: rgba(0, 0, 0, 0.5);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

.modify_class{
  padding: 5%;
  z-index: 10;
  position: absolute;
  width: 400px;
  height: 200px;
  background-color: white;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 15px 15px 15px 15px;
}
.modify_class_background{
  z-index: 9;
  position: absolute;
  width: 3000px;
  height: 3000px;
  background-color: rgba(0, 0, 0, 0.5);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

.modify_class_course{
  padding: 5%;
  z-index: 10;
  position: absolute;
  width: 800px;
  height: 500px;
  background-color: white;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 15px 15px 15px 15px;
}
.modify_class_course_background{
  z-index: 9;
  position: absolute;
  width: 3000px;
  height: 3000px;
  background-color: rgba(0, 0, 0, 0.5);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

.modify_class_student{
  padding: 5%;
  z-index: 10;
  position: absolute;
  width: 800px;
  height: 500px;
  background-color: white;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 15px 15px 15px 15px;
}
.modify_class_student_background{
  z-index: 9;
  position: absolute;
  width: 3000px;
  height: 3000px;
  background-color: rgba(0, 0, 0, 0.5);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
}
</style>